:root {
    --alpha: 60%;

    --bar-bg0: #fff;
    --bg: #fff;
    --emphasis-color: #dfdfdf;
    --font-color: #000;
    --icon-color: none;

    --bar-bg: color-mix(in srgb, var(--bar-bg0) var(--alpha), transparent);
    --hover-color: var(--emphasis-color);
    --bar-hover-color: color-mix(
        in srgb,
        var(--emphasis-color) 25%,
        transparent
    );
    --bar-focus-color: var(--emphasis-color);

    --d-bar-bg0: #000;
    --d-bg: #000;
    --d-emphasis-color: #333;
    --d-font-color: #fff;
    --d-icon-color: invert(1);

    --m-color-b: color-mix(in oklab, var(--emphasis-color) 85%, var(--bg));
    --m-color-bb: color-mix(in oklab, var(--emphasis-color) 50%, var(--bg));
    --m-color-bbb: color-mix(in oklab, var(--emphasis-color) 25%, var(--bg));

    --m-color-f: color-mix(
        in oklab,
        var(--emphasis-color) 85%,
        var(--font-color)
    );
    --m-color-ff: color-mix(
        in oklab,
        var(--emphasis-color) 50%,
        var(--font-color)
    );
    --m-color-fff: color-mix(
        in oklab,
        var(--emphasis-color) 25%,
        var(--font-color)
    );

    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --button-active: scale(0.95) translateZ(0);
    --border-radius: 8px;
    --blur: blur(10px);
    --shadow: color-mix(in srgb, var(--emphasis-color) 20%, transparent) 0 0 4px,
        color-mix(in srgb, var(--font-color) 30%, transparent) 0 0 2px;
    --font-color-l: color-mix(in srgb, var(--font-color) 50%, var(--bg));
    --font-color-ll: color-mix(in srgb, var(--font-color) 30%, var(--bg));
    --color-size: 150px;
    --color-i-size: 10px;
    --monospace: ;
    --main-font: sans-serif;
    --bar-size: 60px;
    --bar-icon: 0.7;
    --base-size1: 32px;
    --b-button: var(--base-size1);
    --o-padding: 8px;
    --base-size2: 24px;
    --space2: 4px;
}

*:focus-visible {
    outline: 1px var(--m-color-f) solid;
    outline-offset: 1px;
}

body {
    font-family: var(--main-font);
    color: var(--font-color);
    background-color: var(--bg);
}

.window_bg {
    background-color: transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ddd;
}
/* biome-ignore lint/nursery/noUnknownPseudoClass: electron supports this pseudo-class */
::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0;
    background-color: transparent;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

body button,
body input,
body select,
*:has(> .icon),
.b-like,
.group {
    height: var(--b-button);
    border-radius: var(--border-radius);
    color: var(--font-color);
    font-size: inherit;
    transition: var(--transition);
    user-select: none;
    outline: 1px solid transparent;
    background: transparent;
    outline-offset: -1px;
}

:not(.group)
    > :where(button, input, select, textarea, *:has(> .icon), .b-like) {
    background-color: var(--bg);
    border-radius: var(--border-radius);
    transition: var(--transition);
    outline: 1px solid var(--m-color-b);
}
.group {
    display: flex;
    outline: 1px solid var(--m-color-b);
    outline-offset: -1px;
    border: none;
    width: fit-content;
}
*:has(> .icon) {
    cursor: pointer;
}
body button,
body input,
body select,
.b-like {
    padding-inline: var(--o-padding);
    width: fit-content;
}

body button,
body select {
    &:hover {
        background-color: var(--hover-color);
    }
}

body select {
    field-sizing: content;
}

button:active {
    transform: var(--button-active);
}

.icon {
    pointer-events: none;
    max-width: 100%;
    max-height: 100%;
    filter: var(--icon-color);
    user-select: none;
    display: block;
}

*:has(> .icon) {
    display: flex;
    padding-inline: 0;
    width: var(--b-button);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

option {
    font-size: 1rem;
    background-color: var(--bg);
}

body textarea {
    outline-offset: -1px;
    padding: var(--o-padding);
    width: 300px;
}

body dialog {
    padding: var(--o-padding);
    border-radius: calc(var(--border-radius) + var(--o-padding));
    color: var(--font-color);
    background-color: var(--bg);
}
body dialog::backdrop {
    backdrop-filter: var(--blur);
    background-color: #0004;
}

kbd {
    display: inline-block;
    padding: 2px 4px;
    border-radius: var(--border-radius);
    background: linear-gradient(315deg, #e6e6e6, #ffffff);
    font-family: var(--monospace);
    border: 1px solid #ddd;
}

input[type="number"] {
    font-family: var(--monospace);
    field-sizing: content;
}

label:has(> input[type="checkbox"]) {
    cursor: pointer;
}

input[type="checkbox"] {
    appearance: none;
    top: 2px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border-radius: 4px;
    transition: var(--transition);
    cursor: pointer;
    padding: 0;
}
input[type="checkbox"]:checked {
    background-color: var(--m-color-f) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 8 9 19 4 14'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
}

.bar {
    background-color: var(--bar-bg);
    backdrop-filter: var(--blur);
    & :is(button, *:has(> .icon), input) {
        border: none;
        outline: none;
        background-color: transparent;
    }
    & :is(button, *:has(> .icon), input) {
        &:hover {
            background: var(--bar-hover-color);
        }
    }
}

.small-size {
    --b-button: var(--base-size2);
    --o-padding: var(--space2);
    & > * {
        --border-radius: 4px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bar-bg0: var(--d-bar-bg0) !important;
        --bg: var(--d-bg) !important;
        --emphasis-color: var(--d-emphasis-color) !important;
        --icon-color: var(--d-icon-color) !important;
        --font-color: var(--d-font-color) !important;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #444;
    }
    /* biome-ignore lint/nursery/noUnknownPseudoClass: <explanation> */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    kbd {
        box-shadow: 0 5px #fff4;
        background: linear-gradient(315deg, #191919, #000);
    }
}
